<template>
  <div class="box">
    <div class="block">
      <el-date-picker v-model="years" type="year" placeholder="选择年">
      </el-date-picker>
      <el-button @click="add" icon="el-icon-search" circle></el-button>
    </div>

    <div ref="chart" style="width: 100vw; height: 60vh"></div>
  </div>
</template>

<script>
// import '../../../assets/css/reportform.less'
export default {
  data() {
    return {
      years: "",
      dataA: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      dataB: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      uid: this.$jwt(localStorage.getItem("User-Token")).uid,
    };
  },
  methods: {
    ajax() {
      this.$http
        .get("/api/report/index", {
          datatime: this.years.getFullYear(),
          uid: this.uid,
        })
        .then((res) => {
          console.log(res);
          res.reportData.forEach((element) => {
            if (element.mo_flage == 1) {
              let monthNum = element.con_time.substring(
                element.con_time.indexOf("-") + 1,
                element.con_time.lastIndexOf("-")
              );
              if (
                element.con_time.substring(0, element.con_time.indexOf("-") + 1)
              ) {
                this.dataA[Number(monthNum) - 1] += Number(element.mo_money);
              }
            } else if (element.mo_flage == 0) {
              let monthNum = element.con_time.substring(
                element.con_time.indexOf("-") + 1,
                element.con_time.lastIndexOf("-")
              );
              if (
                element.con_time.substring(0, element.con_time.indexOf("-") + 1)
              ) {
                this.dataB[Number(monthNum) - 1] += Number(element.mo_money);
              }
            }
          });
          // console.log(this.data);
          let myChart = this.$echarts.getInstanceByDom(this.$refs.chart);
          if (myChart == null) {
            myChart = this.$echarts.init(this.$refs.chart);
          }
          let option = {
            title: {
              text: "年表",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["收入", "支出"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月 ",
              ],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "收入",
                type: "line",
                stack: "Total",
                data: this.dataA,
              },
              {
                name: "支出",
                type: "line",
                stack: "Total",
                data: this.dataB,
              },
            ],
          };
          myChart.setOption(option);
        });
    },
    add() {
      if (this.years) {
        this.dataA = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        this.data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        this.ajax();
      } else {
        alert("请输入年份");
      }
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.box {
  height: 90vh;
  p {
    display: flex;
    height: 2rem;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    background-color: rgb(219, 219, 219);
    a {
      flex: 4;
      height: 2rem;
      line-height: 2rem;
      color: #000;
    }
    span {
      flex: 2;
      color: royalblue;
      line-height: 2rem;
    }
  }
}
</style>